<main>
	<header>
		<div class="toolbar">
			<a class="bar-button back-button"><i class="dwz-icon-arrow-left"></i></a>
			<div class="header-title">环形堆叠图表</div>
			<button class="button is-mini"><i class="dwz-icon-refresh"></i>更新</button>
		</div>
	</header>

	<section class="pane">

		<div class="scroll-content dwz-scroll">
			<div class="scroll">

				<div class="flex-wrap-center">
					<div class="flex-1" id="chart-percent-1"></div>
					<div class="flex-1" id="chart-percent-2"></div>
				</div>
				<div class="flex-wrap-center">
					<div class="flex-1" id="chart-percent-3"></div>
					<div class="flex-1" id="chart-percent-4"></div>
					<div class="flex-1" id="chart-percent-5"></div>
				</div>

			</div>
		</div>

	</section>
</main>

<script type="text/javascript">
	function helper(tpl, params) {
		// console.log(this, tpl, params)

		const chart1 = new DwzChartCircle({
			$el: this.find('#chart-percent-1'),
			color: ['#5E8FFF', '#0099DD', '#8C5DFF', '#5EFFF3', '#E78597'],
			data: [10, 30, 20, 10, 30],
			axis: ['产品', '前端', '后端', '测试', '运维'],
			img: './image/navTab/home-active.svg',
			textColor: '#0099DD',
			textSize: '40px',
			fgWidth: 15,
			bgWidth: 3
		});
		const chart2 = new DwzChartCircle({
			$el: this.find('#chart-percent-2'),
			data: [20, 20, 20, 20, 20],
			axis: ['产品', '前端', '后端', '测试', '运维'],
			img: './image/navTab/message-active.svg',
			sideType: 'onside',
			fgWidth: 15,
			bgWidth: 3
		});
		const chart3 = new DwzChartCircle({
			$el: this.find('#chart-percent-3'),
			bgColor: 'rgba(100, 50, 50, .8)',
			data: [10, 30, 20, 10, 10],
			axis: ['产品', '前端', '后端', '测试', '运维'],
			img: './image/navTab/my-active.svg',
			sideType: 'outside',
			fgWidth: 10,
			bgWidth: 3
		});
		const chart4 = new DwzChartCircle({
			$el: this.find('#chart-percent-4'),
			data: [10, 30, 20, 10, 30],
			axis: ['产品', '前端', '后端', '测试', '运维'],
			img: './image/icon/icon-map-nav.svg',
			sideType: 'inside',
			fgWidth: 10,
			bgWidth: 3
		});

		const chart5 = new DwzChartCircle({
			$el: this.find('#chart-percent-5'),
			data: [50],
			axis: ['占比'],
			sideType: 'outside',
			fgWidth: 10,
			bgWidth: 1
		});

		this.find('button.button').click((event) => {
			let total = 0
			const data = [];
			for (let i = 0; i < 4; i++) {
				let val = Math.round(Math.random() * 25);
				total += val;
				data.push(val);
			}
			data.push(100 - total);
			chart1.setData(data);
			chart2.setData(data);
			chart3.setData(data);
			chart4.setData(data);
		});
	}
</script>